<template>
  <div class="app-container">

    <u-page title="广告维护">

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="广告类型" prop="adtype">
            <el-select v-model="listQuery.adtype" placeholder="请选择广告类型"  clearable>
              <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="广告名称" prop="adname">
            <el-input v-model="listQuery.adname" placeholder="请输入广告名称" style="width: 280px" clearable />
          </el-form-item>
          <el-form-item label="广告位置" prop="floor">
            <el-select v-model="listQuery.floor" placeholder="请选择楼层" clearable>
              <el-option v-for="item in floors" :label="item.code" :value="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-edit" style="margin-left: 20px" @click="handleAddAdInfo">新增</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:right >
          <el-table-column label="操作" align="center" fixed="right" >
            <template slot-scope="{ row }">
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </u-page>
    <!--  弹窗 -->
    <el-drawer
      title="厂商合同信息"
      :visible.sync="adinfotable"
      direction="rtl"
      size="60%"
    >
      <div style="margin-top: 5px;padding-left: 10px">
        <el-form ref="adformrules" :model="adform" :rules="adformrules">
          <el-form-item label="广告类别" prop="adtype">
            <el-radio-group v-model="adform.adtype">
              <el-radio label="LED" />
              <el-radio label="灯箱" />
              <el-radio label="橱窗" />
              <el-radio label="立牌" />
            </el-radio-group>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="广告名称" prop="adname">
                <el-input v-model="adform.adname" autocomplete="off" style="width: 200px" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="投放楼层" prop="floor">
                <el-select v-model="adform.floor" placeholder="请选择楼层">
                  <el-option v-for="item in floors" :label="item.code" :value="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :hidden="adform.adtype!=='LED'">
              <el-form-item label="视频时长" :rules="{required: adform.adtype==='LED', message: '请填写视频时长', trigger: 'blur' }">
                <el-input v-model.number="adform.duration" autocomplete="off" style="width: 180px" />
                <span>秒</span>
              </el-form-item>
          </el-row>
          <el-row :hidden="adform.adtype!=='LED'">
              <el-form-item label="每日频次" >
                <el-input v-model.number="adform.countday" autocomplete="off" style="width: 180px" />
                <span>次/日</span>
                <span style="font-size:14px;color: #C03639;margin-left: 20px" >[不限制次数则填写0]</span>
              </el-form-item>
          </el-row>
          <el-row>
            <el-col >
              <el-form-item label="广告租金">
                <el-input v-model.number="adform.adrent" autocomplete="off" style="width: 180px" />
                <span>元/天</span>
              </el-form-item>
            </el-col>
<!--            <el-col :span="12">
              <el-form-item label="时间单位">
                <el-select v-model="adform.timeunit" placeholder="请选择单位">
                  <el-option v-for="item in unitList" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>-->
          </el-row>
          <el-row>
            <el-col :span="12" :hidden="adform.adtype==='LED'">
              <el-form-item label="制作费用">
                <el-input v-model.number="adform.processcost" autocomplete="off" style="width: 180px" />
                <span>元</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :hidden="adform.adtype==='LED'">
            <el-col :span="12">
              <el-form-item label="材质">
                <el-input v-model="adform.material" autocomplete="off" style="width: 180px" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="尺寸">
                <el-input v-model.number="adform.size1" autocomplete="off" style="width: 100px" />
                <span>*</span>
                <el-input v-model.number="adform.size2" autocomplete="off" style="width: 100px" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="onSave('adformrules')">保存</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      api: this.$u.api.ContractMaintain,
      dataapi: this.$u.api.ContractApply,
      typeList: [{ value: 'LED', label: 'LED' }, { value: '灯箱', label: '灯箱' }, { value: '橱窗', label: '橱窗' }],
      // 楼层
      floors: [],
      adinfotable: false,
      listOptions: {
        mutiSelect: true,
        stripe: true
      },
      listLoading: false,
      list: [],
      adform: {
        id: '',
        updateflag: false,
        adtype: '',
        floor: '',
        adname: '',
        adrent: 0,
        processcost: 0,
        duration: '',
        countday: '',
        // timeunit: '',
        material: '',
        size1: '',
        size2: ''
      },
      formLabelWidth: '80px',
      // 表格
      columns: [
        {
          prop: 'adtype',
          label: '广告类型',
          width: '80'
        },
        {
          prop: 'adname',
          label: '广告名称',
          width: '200'
        },
        {
          prop: 'floor',
          label: '楼层',
          width: '100'
        },
        {
          prop: 'duration',
          label: '视频时长',
          width: '120'
        },
        {
          prop: 'countday',
          label: '频次',
          width: '120'
        },
        /* {
          prop: 'timeunit',
          label: '时间单位',
          width: '80'
        },*/
        {
          prop: 'adrent',
          label: '广告租金',
          width: '120'
        },
        {
          prop: 'processcost',
          label: '制作费',
          width: '120'
        },
        {
          prop: 'material',
          label: '材质',
          width: '150'
        },
        {
          prop: 'size',
          label: '尺寸',
          width: '150'
        }
      ],
      listQuery: {
        page: 1,
        pageSize: 20,
        totalCount: 1,
        type: '',
        adname: '',
        floor: ''
      },
      // 规则
      adformrules: {
        adtype: [
          { required: true, message: '请选择广告类型', trigger: 'change' }
        ],
        floor: [
          { required: true, message: '请选择楼层', trigger: 'change' }
        ],
        adname: [
          { required: true, message: '请填写广告位置', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getFloors()
  },
  methods: {
    // 加载楼层
    getFloors() {
      const self = this
      self.dataapi.floors().then(res => {
        this.floors = res.data
      })
    },
    handleAddAdInfo() {
      this.adform.updateflag = false
      const self = this
      self.adinfotable = true
    },
    cancelForm() {
      this.loading = false
      this.dialog = false
      clearTimeout(this.timer)
    },
    handleFilter() {
      this.hdlFilter()
    },
    // 编辑
    handleEdit(row) {
      const self = this
      self.adform = row
      self.adinfotable = true
      this.adform.updateflag = true
    },
    // 删除
    handleDelete(row) {
      const self = this
      self.api.delete(row.id).then(res => {
        // 通知信息
        self.$u.msg('删除成功！')
        this.hdlFilter()
      }).catch(() => {
        self.$u.msg('删除失败，请重试或联系管理员')
        return
      })
    },
    // 保存
    onSave(formName) {
      const self = this
      // 表单验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 通过验证进行提交动作
          self.api.save(self.adform).then(res => {
            // 通知信息
            self.$u.msg(res.msg)
          }).catch(() => {
            return
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style>
.el-select .el-input {
  width: 220px;
}
</style>
<style lang="scss" scoped>
.app-container{
}
</style>
